<!-- 申请退场结算 -->
<template>
	<view>
		<view class="p-3">
			<view class="bt-block">
				<bg-cell2 label="选择退场结算的项目" :border="false">
					<template slot="value">
						<bg-select :columns="projects" @select-change="selectHandler"></bg-select>
					</template>
				</bg-cell2>

			</view>
			<view class="bt-block mt-3">
				<bg-title class="margin-top mx-3">
					<text class="font-14 font-normal">工资结算确认单</text>
				</bg-title>
				<view class="font-13 py-4 px-5">
					<bg-desc class="mt-2 mb-5" label="项目名称" :value="postData.projectName"></bg-desc>
					<bg-desc class="my-5" label="结算周期"
						:value="`${postData.entryDate}-${postData.lastWorkDate}`"></bg-desc>
					<bg-desc class="my-5" label="结算工日" :value="postData.attendanceDays"></bg-desc>
					<bg-desc class="my-5" label="日工资" :value="postData.daySalary"></bg-desc>
					<bg-desc class="my-5" label="加班工资" :value="postData.overtimeSalary"></bg-desc>
					<!-- <bg-desc class="my-5" label="扣除款项"  :value="postData.deductAmount+'元(不限于借支、劳保物资、违规)'"></bg-desc> -->
					<view class="my-5" style="display: flex;align-items: center;justify-content: space-between;">
						<view class="">劳保费</view>
						<view style="display: flex;align-items: center;">
							<u--input max-length="10" inputAlign='right' type="number" border="none"
								v-model="postData.workWearAmount">
							</u--input>
							&nbsp;
							&nbsp;
							元
						</view>
					</view>
					<view class="" style="display: flex;align-items: center;justify-content: space-between;">
						<view class="">扣除款项</view>
						<view style="display: flex;align-items: center;">
							<u--input max-length="10" inputAlign='right' type="number" border="none"
								v-model="postData.deductAmount">
							</u--input>
							&nbsp;
							&nbsp;
							元
						</view>
					</view>
					<view class="text-red font-12" style="text-align: right;">
						不限于借支、劳保物资、违规
					</view>
					<!-- <bg-desc class="my-5" label="合计结算工资" :value="postData.amount"></bg-desc> -->
					<view style="display: flex; justify-content: flex-end; margin-bottom: 10px;">
						<view v-if="materialUnreturnedList && materialUnreturnedList.length" style="padding: 10rpx; min-width: 240px;">
							<view style="font-weight: bold; margin-bottom: 8px;">物资明细</view>
							<view style="display: flex; font-size: 13px; font-weight: bold;">
								<view style="flex: 1;max-width: 140rpx;min-width: 140rpx;">物资名称</view>
								<view style="flex: 1; text-align: center;max-width: 140rpx;min-width: 140rpx;">未退还数量</view>
								<view style="flex: 1; text-align: center;max-width: 140rpx;min-width: 140rpx;">单价</view>
								<view style="flex: 1; text-align: center;max-width: 140rpx;min-width: 140rpx;">总价</view>
							</view>
							<view v-for="item in materialUnreturnedList" :key="item.materialId" style="display: flex; font-size: 13px; margin-top: 4px;">
								<view style="flex: 1;max-width: 140rpx;min-width: 140rpx;">{{ item.materialName }}</view>
								<view style="flex: 1;text-align: center;max-width: 140rpx;min-width: 140rpx;">{{ item.unreturnCount }}</view>
								<view style="flex: 1;text-align: center;max-width: 140rpx;min-width: 140rpx;">{{ item.unitPrice }}</view>
								<view style="flex: 1;text-align: center;max-width: 140rpx;min-width: 140rpx;">{{ item.deductAmount }}</view>
							</view>
						</view>
					</view>
					<bg-desc class="my-5" label="合计结算工资" :value="totalSettlementSalary"
						:valueStyle="{ 'color': '#EE3636' }"></bg-desc>
					<bg-desc class="my-5" label="结算日期" :value="postData.clearanceDate"></bg-desc>
				</view>
			</view>
			<view class="bt-block mt-3">
				<bg-title class="margin-top mx-3">
					<text class="font-14 font-normal">本人确认签字</text>
				</bg-title>
				<view class="p-3">
					<bg-sign @sign-success="signHandler"></bg-sign>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>

		<view class="bt-footer">
			<bg-btn @tap="saveData()">结算并提交</bg-btn>
		</view>
	</view>

</template>

<script>
import {
	settleProject,
	settlePost,
	calculateLeftSalary
} from "@/api/retire.js"
export default {
	data() {
		return {
			projects: [],
			postData: {
				"projectId": 0,
				"projectName": '',
				"userId": this.$store.getters.userId,
				"amount": 0,
				"status": "",
				"signedImg": "",
				"entryDate": "",
				"lastWorkDate": "",
				"attendanceDays": 0,
				"daySalary": 0,
				"overtimeSalary": 0,
				"deductAmount": 0,
				"clearanceDate": '',
				"workWearAmount": 0
			},
			materialUnreturnedList: []
		}
	},
	computed: {
		// 动态计算合计结算工资
		totalSettlementSalary() {
			const amount = Number(this.postData.amount) || 0;
			const workWearAmount = Number(this.postData.workWearAmount) || 0;
			const deductAmount = Number(this.postData.deductAmount) || 0;
			
			return (amount - workWearAmount - deductAmount).toFixed(2);
		}
	},
	mounted() {
		this.getProjects()
		// this.postData.clearanceDate = uni.$u.timeFormat(Date.now(), 'yyyy-mm-dd');
	},
	methods: {
		getProjects() {
			settleProject().then(res => {
				this.projects = res.data.map(r => {
					return {
						label: r.projectName,
						value: r.projectId,
						...r
					}
				})
			})
		},
		signHandler(e) {
			this.postData.signedImg = e.fileName
		},
		selectHandler({
			value,
			values
		}) {
			let _value = value[0]
			console.log('value', value);
			calculateLeftSalary({
				projectId: _value.projectId
			}).then(res => {
				console.log('res', res);
			this.postData = res.data
			this.materialUnreturnedList = res.data.materialUnreturnedList
				
			})

			// this.postData = _value


			
			// this.postData.projectId = _value.projectId
			// this.postData.projectName = _value.projectName
		},
		saveData() {
			console.log('this.postData', this.postData);
			if (!this.postData.signedImg) return this.$modal.msg("请先本人确认签字")
			settlePost(this.postData).then(res => {
				this.$modal.msgSuccess("提交成功")
				uni.$emit("refresh-page", true)
				this.$tab.navigateBackDelay()
			})
		}
	}
}
</script>

<style></style>